import React from 'react';
import {NavLink, Link} from 'react-router-dom';
import {fetchList,idnum} from '../action/new'
import { connect } from 'react-redux';
//import {mapStateToProps} from '../value/mapStateToProps'


function objchangestring(obj){
	var arr=[];
	for(var i in obj){
		arr.push(i+'='+obj[i]);
	}
	return arr.join('&');
}

var $ = (function(){
  var ajax=function(url,callback){
       var xhr=new XMLHttpRequest();
       xhr.open("POST",url,true);
       xhr.send("");
       xhr.onreadystatechange=function(){
         if(xhr.readyState==4&&xhr.status==200){
               callback(JSON.parse(xhr.responseText));
         }
       }
  }
  return {
    http:ajax    
   }

})();
    
class News extends React.Component{  
 
              constructor(props) {
                super(props);             
            
            }
            target(e){
            var _this=this;
            var a=null;
            var arr=[];
              console.log(e.target);
              console.log(typeof(e.target.getAttribute('id')));
             if(e.target.getAttribute('id')!='myTabDrop1'){
              $.http(`http://10.31.153.45:3000/News/info/${e.target.getAttribute('id')}`,function(data){
                      arr.push(data.docs)
                      _this.setState({
                          data: Object.assign({}, _this.state.data, {data:arr}),
                      })   
              });
              this.setState({
                id:Object.assign({},this.state.id,
                {id:e.target.getAttribute('id')}
                )
              })
           };
          }
          shouldComponentUpdate(){
            console.log('updated');
            return true;
          }
          componentWillUpdate(a,b){
                if(e.target.getAttribute('id')!='myTabDrop1'){

                  this.props.fetchList({page:this.props.page,id:e.target.getAttribute('id')})
                }
              }
          shouldComponentUpdate(a,b){
            return true;
          }
            componentWillMount(){
              //console.log(this.state.id.id);
             this.props.fetchList({page:this.props.page,id:0});   
            }
          
        //获取所有数据
        // componentDidMount(){
        //     this.props.fetchList({page:this.props.page});
        //     console.log(componentDidMount)
        //  //    $('#delDanger').popover('hide')
        //  }
         // 搜索数据
         handleSearch(){
         // console.log(this.state)
           //  console.log(this.state.data.data[0][0].global)
              this.state=$('#searchInput').val()
             // console.log(title)
             this.props.fetchList({global:this.state.data.data[0][0].global});
         }
         // 上一页
         decreasePage=(e)=>{
             var page=this.props.page-1;
            this.props.fetchList({page:page,id:this.props.id});   
         }
         // 下一页
         increasePage=(e)=>{
           console.log(this.props.id.id);
             var page=parseInt(this.props.page)+1
             this.props.fetchList({page:page,id:this.props.id});
         }

    render(){
      console.log('232323',this.props)
      console.log("this.props.id",this.props.id)
      let list = [];
      var list1=[];
      var pagelis=[];
      //console.log(this.state.data.data[0]);
    //const {news} = this.state.data.data[0];
    const newsList =this.props.newsLists.docs.length;
   
    const { newsLists,page}=this.props;
    const { limit,pages,total }=newsLists;
   
    for(var i=0;i<newsList;i++){
      //const newsType= this.state.data.data[0][i].type;
      
      var a=this.props.newsLists.docs[i];
      var link='/Newsdetail/'+a._id;
      list.push(
        <ul>
           <li>
                <NavLink to={link}>{this.props.newsLists.docs[i].global}</NavLink>
           </li>
      </ul>
    )
    }
    for(var i=1;i<=pages;i++){
      this.props.page==i? 
      pagelis.push( <li key={i} className='active'><a href="javascript:void(0)" onClick={this.pageClick}>{i}</a></li> ):
     pagelis.push( <li key={i}><a href="javascript:void(0)" onClick={this.pageClick}>{i}</a></li> )
  }
 console.log(pagelis);
        return(
          <div>   
             <div className="panel panel-default col-md-12" style={{height:'300px'}}> 
                  <img src='http://wapfile.desktx.com/pc/161220/bigpic/585784024273c.jpg'  style={{width:'1200px',height:'300px'}}/>
             </div>
            <div style={{display:'inline-block'}}  className='col-md-8'>
             <div>              
                <ul id="myTab" className="nav nav-tabs " onClick={this.target.bind(this)}>
                      <li className="active"><a href="#home" data-toggle="tab" id='0' >
                热门新闻</a></li>
                      <li ><a href="#ios" data-toggle="tab" id='1' >国际新闻</a></li>
                      <li className="dropdown" >
                        <a href="#" id="myTabDrop1" className="dropdown-toggle" 
                          data-toggle="dropdown">
                          国内新闻 <b className="caret"></b></a>
                        <ul className="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                          <li><a href="#jmeter" tabIndex="-1" data-toggle="tab" id='2.1'>娱乐新闻</a></li>
                          <li><a href="#ejb" tabIndex="-1" data-toggle="tab" id='2.2'>体育新闻</a></li>
                        </ul>
                      </li>
                 </ul>
              </div>
           
                      <div id="myTabContent" className="tab-content" style={{height:'300px'}}>
                          <div className="tab-pane fade in active" id="home" type={1}>
                            {list}
                           
                          </div>
                          <div className="tab-pane fade" id="ios" type={2}>
                          {list}
                          </div>
                          <div className="tab-pane fade" id="jmeter" type={3}>
                          {list}
                          </div>
                          <div className="tab-pane fade" id="ejb" type={4}>
                          {list}
                            
                          </div>
                      </div>
                      <div style={{marginLeft:'50px'}}>
                          <ul class="pagination">
                            <li><a href="javascript:void(0)" onClick={this.decreasePage.bind(this)}>上一页</a></li>                            
                            <li><a href="javascript:void(0)">{page}</a></li>                            
                            <li><a href="javascript:void(0)" onClick={this.increasePage.bind(this)}>下一页</a></li>
                          </ul>
                      </div>
             </div>
          <div className='col-md-4'>
                <div class="col-lg-10 col-md-4" >
                  <div class="input-group">
                    <input type="text" class="form-control" id='searchInput'/>
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button" onClick={this.handleSearch.bind(this)}>
                        搜索
                      </button>
                    </span>
                  </div>
                </div>

                <div className="panel panel-default col-md-4 col-lg-10" style={{marginTop:'10px',height:'200px',overflow:'hidden'}}>                  
                <div className="tab-pane fade in active" id="home">
                {list}
               
              </div>
                  </div>
              </div>
        </div>
        )
    }
  
};
const mapStateToProps=(state)=>{
  console.log(123,state);
    return{
        id:state.news.id,
        newsLists:state.news.newsLists,
        page:state.news.page,
        message:state.news.message,
    }
}
export default  connect(mapStateToProps,{fetchList,idnum})(News);